import React from 'react';
import { useNavigate } from 'react-router-dom';
import Layout from './Layout';
import './PaymentSuccess.css';

const PaymentSuccess = () => {
    const navigate = useNavigate();

    return (
        <Layout>
            <div className="payment-success">
                <div className="success-container">
                    <div className="success-icon">
                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="#52c41a" />
                        </svg>
                    </div>
                    <h2>支付成功</h2>
                    <p className="success-message">您的订单已支付成功，我们将尽快为您发货</p>
                    <div className="success-actions">
                        <button className="view-order" onClick={() => navigate('/orders')}>
                            查看订单
                        </button>
                        <button className="continue-shopping" onClick={() => navigate('/productDetail')}>
                            继续购物
                        </button>
                    </div>
                </div>
            </div>
        </Layout>
    );
};

export default PaymentSuccess; 